<template>
    <view class="flex card_container" @click="toDetailHanlder">
        <view class="image">
            <image class="image" :src="filmDeatil.poster" mode="widthFix" />
        </view>
        <view class="title">
            <view class="name flex">
                <view>{{ filmDeatil.name }}</view>
                <view>{{ filmDeatil.item.name }}</view>
            </view>
            <view class="score" v-if="filmDeatil.grade">观众评分：<text class="scoretext">{{ filmDeatil.grade }}</text>
            </view>
            <view class="score" v-else></view>
            <view class="actor">主演：{{name}}</view>
            <view class="area">{{ filmDeatil.nation }} | {{ filmDeatil.runtime }}分钟</view>
        </view>
        <view class="buy">
            <van-button color="#ff5f16" size="small" round plain>{{ filmDeatil.isPresale ? "购票" : "预售" }}</van-button>
        </view>
    </view>
</template>

<script setup lang="ts">
const prop = defineProps<{
    filmDeatil: any
}>()
const name = prop.filmDeatil.actors.map((item:any)=>item.name).join(' ')

// 去详情页
function toDetailHanlder() {
    uni.navigateTo({ url: '/pages/detail/index?filmId=' + prop.filmDeatil.filmId })
}

</script>

<style lang="less" scoped>
.card_container {
    padding: 20rpx 20rpx 20rpx 0;
    align-items: center;
    justify-content: space-between;

    .image {
        width: 132rpx;

        .image {
            width: 100%;
        }
    }

    .title {
        width: 400rpx;
        height: 184rpx;
        padding: 0 20rpx;

        .name {
            :first-child {
                font-size: 32rpx;
                margin-right: 10rpx;
                max-width: 340rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            :last-child {
                background-color: #d2d6dc;
                font-size: 12px;
                color: #fff;
                width: 40rpx;
                height: 28rpx;
                line-height: 28rpx;
                border-radius: 4rpx;
                padding: 0 4rpx;
                margin-top: 8rpx;
            }

        }

        .score {
            line-height: 50rpx;
            height: 50rpx;
            font-size: 26rpx;
            color: #797d82;

            .scoretext {
                font-size: 28rpxpx;
                color: #ffb232;
            }
        }

        .actor {
            width: 100%;
            height: 34rpx;
            line-height: 34rpx;
            font-size: 26rpx;
            color: #797d82;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .area {
            height: 34rpx;
            line-height: 34rpx;
            font-size: 26rpx;
            color: #797d82;
        }
    }
}
</style>